<template>
  <div class="box">
    <div class="nav">
      <span>公司</span>
      <van-search
        v-model="value"
        shape="round"
         input-align="center"
        placeholder="请输入搜索关键词"
      />
    </div>
    <div class="banner">
      <img src="../../assets/banner.png" alt="" />
    </div>
    <div class="center">
      <van-row>
        <van-col span="5">推荐</van-col>
        <van-col span="5">距离</van-col>
        <van-col span="11">评分</van-col>
        <van-col span="3" @click="distance">筛选</van-col>
      </van-row>
    </div>
    <div @click="$router.push('/corporate')" class="shangpin" v-for="(item, index) in list" :key="index">
      <van-card
        :desc="item.region"
        :title="item.name"
        :thumb="`http://localhost:1337${item.logo}`"
      >
        <template #tags>
          <van-tag type="danger">{{ item.type }}</van-tag>
          <van-tag type="danger">{{ item.step }}</van-tag>
          <van-tag type="danger">{{ item.scale }}</van-tag>
          <van-tag type="danger" class="fen">{{ item.score }}分</van-tag>
          <van-tag type="danger" class="km">{{ item.distance }}</van-tag>
        </template>
      </van-card>
      <div class="zhiwei">
        <span
          >在招职位: <b> {{ item.positions }} </b></span
        >
        /
        <span>最后更新时间：{{ item.updated_at | fromNow }}</span>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '60%' }">
      <div>
        <div class="pop">
          <div class="juli">距离</div>
          <button>由远及近</button>
          <button>由近及远</button>
        </div>
        <div class="pingfen">
          <div class="juli">评分</div>
          <button>4分-5分</button>
          <button>3分-3.9分</button>
          <button>2分-2.9分</button>
          <button>1分-1.9分</button>
          <button>1分以下</button>
        </div>
        <div class="footer">
          <button>清除</button>
          <button>确认</button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { companiesListApi } from './company.js'

import moment from 'moment'
//设置语言
moment.locale('zh-cn')
export default {
  name: 'company',
  data () {
    return {
      value: '',
      show: false,
      list: []
    }
  },
  methods: {
    distance () {
      this.show = true
    },
    async companiesList () {
      let res = await companiesListApi()
      console.log(res);
      this.list = res.data.data.list
    }
  },
  created () {
    this.companiesList()
  },
  /* 过滤器 */
  filters: {
    fromNow (value) {
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
.box {
  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    span {
      font-size: 40px;
      font-weight: 600;
    }
    .van-search__content.van-search__content--round {
      width: 280px;
    }
  }
  .banner {
    img {
      width: 90%;
      height: 220px;
      padding-left: 30px;
    }
  }
  .center {
    .van-row {
      font-size: 15px;
      font-weight: 500;
      margin: 16px;
    }
  }
  .shangpin {
    position: relative;
    margin-bottom: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f7f4f5;
    .van-card__title.van-multi-ellipsis--l2 {
      font-size: 20px;
      padding: 10px 0;
      font-weight: 700;
    }
    .van-card__desc.van-ellipsis {
      padding-bottom: 16px;
    }
    span.van-tag.van-tag--danger {
      margin-right: 20px;
      background-color: #f7f4f5;
      color: #b4b4bd;
    }
    span.fen.van-tag.van-tag--danger {
      position: absolute;
      right: 0px;
      top: 10px;
    }
    .box .shangpin span.km.van-tag.van-tag--danger {
    position: absolute;
    top: 0.25rem;
    left: 2.5rem;
}
    .zhiwei {
      font-size: 13px;
      margin-left: 112px;
      color: #b4b4bd;
      b {
        color: skyblue;
      }
    }
  }
  .van-popup.van-popup--bottom {
    .pop {
      margin: 10px 0 10px 20px;
      font-size: 16px;
      .juli {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 16px;
      }
      button {
        margin-right: 10px;
        background: #f9f8f8;
        border: 0px;
        padding: 10px 50px;
        border-radius: 8px;
        &:hover {
          background: #ffe2e9;
          color: #e40137;
          border: 1px solid #e40137;
        }
      }
    }
    .pingfen {
      margin: 10px 0 10px 20px;
      font-size: 16px;
      .juli {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 16px;
      }
      button {
        margin-right: 10px;
        background: #f9f8f8;
        border: 0px;
        width: 160px;
        padding: 10px 20px;
        margin-bottom: 10px;
        border-radius: 8px;
        &:hover {
          background: #ffe2e9;
          color: #e40137;
          border: 1px solid #e40137;
        }
      }
    }
    .footer {
      margin-left: 10px;
      font-size: 18px;
      button {
        padding: 10px 60px;
        margin: 10px;
        border-radius: 14px;
        border: 0;
        &:nth-child(1) {
          color: #e40137;
          background: #ffe2e9;
        }
        &:nth-child(2) {
          background: #e40137;
          color: #fff;
        }
      }
    }
  }
}
</style>
